<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程列表</title>
    <script src="./vue3.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        .forms{
            display: flex;
            justify-content: space-around;
        }
    </style>
</head>
<body>
    <div id="app">
        <table border="1" width="800">
            <thead>
                <tr>
                    <th>课程编号</th>
                    <th>课程名称</th>
                    <th>所属年级</th>
                    <th>学时</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in subjects">
                    <td>{{item.subjectNo}}</td>
                    <td>{{item.subjectName}}</td>
                    <td>{{item.gradeID}}</td>
                    <td>{{item.classHour}}</td>
                    <td>
                        <button @click="handleShowClick(item)">修改</button>
                        <a :href="'subject-edit.html?id='+item.subjectNo">修改</a>
                        <button @click="handleDeleteClick(item)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="forms">
            <div>
                新增课程
                <p>课程名称
                    <input v-model="subject.subjectName"/>
                </p>
                <p>
                    年级
                    <select v-model="subject.gradeID">
                        <option
                                v-for="item in grades"
                                :value="item.gradeID"
                                :key="item.gradeID">{{item.gradeName}}</option>
                    </select>
                </p>
                <p>学时
                    <input v-model="subject.classHour"/>
                </p>
                <p>
                    <button @click="handleAddClick">保存</button>
                </p>
            </div>
            <div>
                修改课程
                <p>课程id
                    <input v-model="subject2.subjectNo"/>
                </p>
                <p>课程名称
                    <input v-model="subject2.subjectName"/>
                </p>
                <p>
                    年级
                    <select v-model="subject2.gradeID">
                        <option
                                v-for="item in grades"
                                :value="item.gradeID"
                                :key="item.gradeID">{{item.gradeName}}</option>
                    </select>
                </p>
                <p>学时
                    <input v-model="subject2.classHour"/>
                </p>
                <p>
                    <button @click="handleUpdateClick">保存</button>
                </p>
            </div>
        </div>

    </div>
    <script>
        const {createApp} = Vue
        createApp({
            data(){
                return {
                    subjects: [],
                    grades:[],
                    subject:{
                        subjectName:'',
                        gradeID:'',
                        classHour:''
                    },
                    subject2:{
                        subjectNo:'',
                        subjectName:'',
                        gradeID:'',
                        classHour:''
                    },
                }
            },
            methods:{
                loadsubjects(){
                    axios.get('http://localhost:8080/subject/all')
                    .then(res => {
                        this.subjects = res.data.data
                        console.log(this.subjects)
                    })
                },
                loadgrades(){
                    axios.get('http://localhost:8080/grade/all')
                        .then(res => {
                            this.grades = res.data.data
                        })
                },
                handleAddClick(){
                    axios.post('http://localhost:8080/subject/add',this.subject)
                    .then(res => {
                        if(res.data.success){
                            alert('添加成功')
                            this.loadsubjects()
                            //重置数据
                            this.subject = {
                                subjectName:'',
                                gradeID:'',
                                classHour:''
                            }
                        }
                    })
                },
                handleDeleteClick(item){
                    let flag = confirm('确认要删除吗?课程名:'+item.subjectName)
                    if(flag){
                        axios.post('http://localhost:8080/subject/delete?subjectNo='+item.subjectNo)
                        .then(res => {
                            if(res.data.success){
                                alert('删除成功')
                                this.loadsubjects()
                            }
                        })
                    }
                },
                handleShowClick(subject){
                    this.subject2.subjectNo = subject.subjectNo
                    this.subject2.subjectName = subject.subjectName
                    this.subject2.classHour = subject.classHour
                    this.subject2.gradeID = subject.gradeID
                },
                handleUpdateClick(){
                    axios.post('http://localhost:8080/subject/update',this.subject2)
                        .then(res => {
                            if(res.data.success){
                                alert('修改成功')
                                this.loadsubjects()
                                //重置数据
                                this.subject2 = {
                                    subjectNo:'',
                                    subjectName:'',
                                    gradeID:'',
                                    classHour:''
                                }
                            }
                        })
                }
            },
            created(){
                this.loadsubjects()
                this.loadgrades()
            }
        }).mount('#app')
    </script>
</body>
</html>